<template>
    <div class="contentbox">
      <div class="box">
        <div class="topbox">
          <div class="topLeft">对话变量</div>
        </div>
        <dk-divider style="margin: 20px"></dk-divider>
        <div class="centerbox">
          <div class="formbox">
            <t-form
              v-show="!isFold"
              ref="form"
              :rules="FORM_RULES"
              :data="formData"
              :layout="'inline'"
              scroll-to-first-error="smooth"
              :class="isFold ? '' : 'paddingBottom'"
              labelAlign="right"
            >
              <t-form-item label="知识点" name="knowledge" :label-width="0">
                  <!-- 可拖拽调整自定义标签的优先级顺序 -->
              </t-form-item>
  
              <t-form-item class="formHandleBox" v-if="!isFold" :label-width="0">
                <t-space size="small" style="gap: 10px; width: 90px">
                  <dk-button @click="handleReset">新增变量</dk-button>
                </t-space>
              </t-form-item>
            </t-form>
          </div>
          <div class="tableBox">
            <t-table
              row-key="index"
              :pagination="pagination"
              :columns="columns"
              :data="data"
              drag-sort="row"
              lazy-load
              @drag-sort="onDragSort"
              :reserve-selected-row-on-paginate="false"
              :editable-row-keys="editableRowKeys"
              :defaultSelectedRowKeys="selectedRowKeys"
              @select-change="rehandleSelectChange"
            ></t-table>
          </div>
        </div>
      </div>
    </div>
    <addknowledge :editoradd="editoradd" :isshow="isshow" @event="close"></addknowledge>
  </template>
    
    <script setup lang="jsx">
    import { reactive, ref, watchEffect } from 'vue';
    import { MessagePlugin } from 'tdesign-vue-next';
    import addknowledge from './components/addknowledge.vue';
    import { initialColumns } from './formcolumn/knowledgeBase';
    
    // 新增知识点弹窗开关
    const isshow = ref(false);
    const editoradd = ref('');
  
    // form 表单
    const formData = reactive({
        knowledge: '', //知识点
        answer: '', //答案
        keyword: '' //关键词
    });
    
    const editableRowKeys = ref(['1']);
    
    const selectedRowKeys = ref([]); //选中行数组
    const rehandleSelectChange = (value, ctx) => {
        //全选事件
        selectedRowKeys.value = value;
        // selectedRowKeys.value = [...selectedRowKeys.value, ...value];
        console.log(value, ctx);
        // console.log(selectedRowKeys.value);
    };
    // 批量按钮的开关
    const disbatchsize = ref(true);
    // 表格操作列
    const columnsobj = ref({
        colKey: 'operation',
        title: '操作',
        fixed: 'right',
        width: '164',
        align: 'center',
        cell: (h, { row }) => {
            // const editable = editableRowKeys.value.includes(row.key);
            return (
                <div class="table-operations">
                    {
                        <dk-button type="primary" hover="color" data-id={row.key} onClick={() => onEdit(row)}>
                            编辑
                        </dk-button>
                    }
                    {
                        <dk-button style="margin-left: 10px" type="warning" hover="color" data-id={row.key} onClick={ondelete}>
                            删除
                        </dk-button>
                    }
                </div>
            );
        }
    });
    const columns = ref([...initialColumns, columnsobj.value]);
    
    // 表格数据
    const data = ref([
        {
            index: 1,
            applicant: '1',
            colanswer: '电子签签署签署签署署',
            colknowledge: '导入',
            colkeyword: '2022-01-01'
        },
        {
            index: 2,
            applicant: '2',
            colanswer: '签署签署签署签署签署签署签署签署签署签署签署签署签署',
            colknowledge: '通话中采集',
            colkeyword: '2022-01-01'
        }
    ]);
    
    // 分页
    const pagination = reactive({
        //   current: 2,
        //   pageSize: 5,
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: data.value.length,
        // showJumper: true,
        showPageSize: true
    });
    
    // 编辑
    const onEdit = (e) => {
        // 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
        //   const { id } = e.currentTarget.dataset;
        //   if (!editableRowKeys.value.includes(id)) {
        //     editableRowKeys.value.push(id);
        //   }
        editoradd.value = 'edit'
        isshow.value = true;
        console.log('编辑', e);
    };
    
    // 删除
    const ondelete = (e) => {
        // 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
        //   const { id } = e.currentTarget.dataset;
        //   if (!editableRowKeys.value.includes(id)) {
        //     editableRowKeys.value.push(id);
        //   }
        console.log('删除');
    };
    
    // 打开新增弹窗
    const handleReset = () => {
        editoradd.value = 'add'
        isshow.value = true;
    };
    // 关闭新增弹窗
    const close = (val) => {
        isshow.value = val;
    };
    
    watchEffect(() => {
        selectedRowKeys.value.length > 0 ? (disbatchsize.value = false) : (disbatchsize.value = true);
    });
    
  //   // currentData is going to be deprecated
  //   const onDragSort = ({ currentIndex, targetIndex, current, target, data, newData, e, sort }) => {
  //       console.log('交换行', currentIndex, targetIndex, current, target, data, newData, e, sort);
  //       if (sort === 'col') {
  //           columns.value = newData;
  //       }
  //   };
    // currentData is going to be deprecated
    const onDragSort = (params) => {
    console.log('交换行', params);
    data.value = params.newData;
  };
    </script>
    
    <style lang="scss" scoped>
  .contentbox {
    width: 100%;
    height: 100%;
    background-color: rgb(231, 231, 232);
    padding: 8px;
    display: flex;
    justify-content: space-between;
  
    .box {
      // width: 100%;
      // height: 100%;
      background-color: #fff;
      // height: 65px;
      padding: 20px 20px 17px 20px;
      border-radius: 8px;
  
      .topbox {
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        display: flex;
      }
      .centerbox {
        // padding: 20px 0;
        .tableBox {
          margin-top: 30px;
          .topbuttons {
            display: flex;
            margin-bottom: 2px;
            .dk-button {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
  .formHandleBox {
    margin: 0;
  }
  .buttonbut {
    display: flex;
    justify-content: flex-end;
  }
  :deep(.t-pagination .t-pagination__select) {
    position: relative;
    height: 28px !important;
  }
  :deep(.t-form-inline .t-form__item) {
    min-width: 60px !important;
  }
  :deep(.t-form-inline){
      justify-content: space-between;
  }
  </style>
    